<template>
	<view style="width: 100%;" class="train23">
		<nodata v-if="showlist.length==0&&apply_datalist.length==0"></nodata>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
		<view class="colleagues flex" v-for="(item,index) in apply_datalist">
			<view class="colleagues-tip">
				<image class="headimg" :src="item.user_headimgurl"></image>
			</view>
			<view class="colleagues-right">
				<view class="colleagues-message w100">
					<view class="phone-number">{{item.user_mobile}} <span  class="f12" v-if="item.role_name">({{item.role_name}})</span></view>
					<view class="name">(姓名:{{item.user_name}})</view>
					<view class="colleagues-company">{{item.company_name}}</view>
					
					<view class="colleagues-add flex" v-if="userinfoin.roleid==1||userinfoin.roleid==2||userinfoin.roleid==3||userinfoin.roleid==5">
						 <view class="colleagues-add-bnt" @click="aduit(item.id,'1')">
						  审核通过
						 </view>
						 <view class="colleagues-add-bntred mT5 mL5" @click="aduit(item.id,'2')">
						  审核不通过
						 </view>
					</view>
					
				</view> 
				
			</view>
		</view>
		
		<view class="colleagues flex" v-for="(item,index) in showlist">
			<view class="colleagues-tip">
				<image class="headimg" :src="item.headimgurl"></image>
			</view>
			<view class="colleagues-right">
				<view class="colleagues-message w100">
					<view class="phone-number">{{item.name}} <span  class="f12">({{item.role_name}})</span></view>
					<view class="name">{{item.mobile}}</view>
					<view class="colleagues-company">{{item.company_name}}</view>
					<view class="colleagues-add flex" v-if="userinfoin.roleid==1||userinfoin.roleid==2||userinfoin.roleid==3||userinfoin.roleid==5">
						 <view class="colleagues-add-bnt" @click="userdeptmanager(item.id,item.deptid,item)" v-if="userinfoin.roleid==1||userinfoin.roleid==2">
						 	{{item.roleid==5||item.roleid==3?'撤消经理':'设置经理'}}
						 </view>
						 <view class="colleagues-add-bntred mT5 mL5" @click="deluserdep(item.id)" v-if="userinfoin.id!=item.id||item.roleid==4||item.roleid==6">
						 	退出部门
						 </view>
						 <view class="colleagues-add-bntred mT5 mL5" @click="deluser(item.id)" v-if="userinfoin.id!=item.id||item.roleid==4||item.roleid==6">
						 	退出公司
						 </view>
						
					</view>
				</view> 
				
			</view>
		</view>
		</mescroll-uni>
		<!-- <view class="colleagues">
			<view class="colleagues-tip"></view>
			<view class="colleagues-right">
				<view class="colleagues-message w100">
					<view class="name">张大炮</view>
					<view class="phone-number">15398886988</view>
				</view>
				<view class="colleagues-add">
					<view class="colleagues-company">中山市科技有限公司</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="btnapprow bg_white" v-if="userinfoin.roleid==2||userinfoin.roleid==3||userinfoin.roleid==5">
			<view class="btn-row" v-if="userinfoin.roleid==2">
				<button type="primary" class="primary " @click="addprouns('is_m')">设置经理</button>
			</view>
			<view class="btn-row" v-if="userinfoin.roleid==3||userinfoin.roleid==5">
				<button type="primary" class="primary " @click="addprouns('nois_m')">加入员工</button>
			</view>
		</view> -->
		
		
		<view class="bg_white " :class="userinfoin.roleid==2?'btnapprow2':'btnapprow'" v-if="userinfoin.roleid==2||userinfoin.roleid==3||userinfoin.roleid==5">
			<view class="btn-row" v-if="userinfoin.roleid==2">
				<button type="primary" class="primary "  @click="addprouns('is_m')">加入经理</button>
			</view>
			<view class="btn-row" v-if="userinfoin.roleid==3||userinfoin.roleid==5">
				<button type="primary" class="primary " @click="addprouns('nois_m')">加入员工</button>
			</view>
			<view class="btn-row" v-if="userinfoin.roleid==2&&detaildata.is_security!='1'">
				<button type="primary" class="primarydel " :class="detaildata.is_security=='1'?'control':''" @click="delPersonnel('nois_m')">删除部门</button>
			</view>
			<view class="btn-row" v-if="userinfoin.roleid==2&&detaildata.is_security!='1'">
				<button type="primary" class="primary " :class="detaildata.is_security=='1'?'control':''" @click="ModifyPersonnel()">修改名称</button>
			</view>
		</view>
		<!-- 加入弹窗 -->
		<view mode="top-right" class="scan-box" v-if="showsharewin">
			<view class="scan-item">
				<view class="scan-content3">
					<image src="../../static/slide-list/fork.png" class="scan-btn" @click="cancelEvent"></image>
					<view class="w90 flex mauto pT30">
						<button type="primary" class="primary " @click="showshare()">转发邀请</button>
						<button type="primary" class="primary mL10" @click="addcode()">扫码邀请</button>						
					</view>
					<view class="scan-text">
						如果该同事尚未加入，请点击按钮
					</view>
				</view>
			</view>
		</view>
		
		<!-- 授权确认 -->
		<view mode="top-right" class="scan-box" v-if="authorization">
			<view class="scan-item">
				<view class="scan-content">
					<view class="scan-icon">
						<image src="../../static/slide-list/icon-scan.png" class="scan-icon-img"></image>
					</view>
					<image src="../../static/slide-list/fork.png" class="scan-btn" @click="cancelEvent2"></image>
					<!-- <image :src="img" class="scan-img"></image> -->
					
					<view class="qrcode scan-img">
						<tki-qrcode  cid="qrcode" ref="qrcode" :val="showval" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
						
					</view>
					<view class="scan-text" style="bottom: 20upx;">						
						请扫码加入
					</view>
				</view>
			</view>
		</view>
		<view class="w100 tRight sharewindow" v-if="sharein" @click="hideshare()">
			<img class="w60 pR10" src="../../static/img/share.png" ></img>
		</view>
		
		<backnext nofooter='YES'></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>


<script>
// import {userindexlist} from '@/common/api/department.js'; //引进requst方法
import {userinfo,userman,addsurveyed,cancelsurveyed} from '@/common/api/user.js'
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {wexinshare} from '@/common/wechatshare.js';
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';	
import {deptudeluser,applystate,deletedept,deptmanager} from '../../common/api/department.js'; //引进requst方法
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			showval:'',
			ifShow: true,
			val: '二维码', // 要生成的二维码值
			size: 350, // 二维码大小
			unit: 'upx', // 单位
			onval: true, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			sharein:false,
							
			detaildata:"",
			id:"",
			showlist:[],
			apply_datalist:[],
			page:0,
			userinfoin:"",
			pagesize:10,
			showsharewin:false,
			downOption:{
				auto: false,
				page:{
					size:10
				}
			},
			upOption:{
				auto:false
			},
			requestchanger:true,
			count:0,
			needpage:0,
			showbtnstup:true,
			keyword:'',
			conType:"con",
			authorization:false,
			getis_del:"",
		}
	},
	methods: {
		addcode(){
			this.showsharewin=false;
			this.sharecode();
		},
		sharecode(){
			this.authorization=true;
			let detail={
				deptid:this.detaildata.id,
				departname:this.detaildata.departname,
				companyid:this.detaildata.companyid,
				is_m:this.detaildata.type
			}
			this.showval=this.weixinhttpurl+'/#/pages/Departmentmanagement/sharedepartment?detailDate=' + encodeURIComponent(JSON.stringify(detail))+'&sharecode='+this.userinfoin.sharecode;
			this.creatQrcode();
		},
		invite(){
			// uni.reLaunch({
			// 	url: './inviteColleagues'
			// });
			this.sharein=true;
			uni.showToast({
			    title:  '点击右上角进行分享',
			    duration: 2000,
				icon:'none'
			});
			
			let detail={
				deptid:this.detaildata.id,
				departname:this.detaildata.departname,
				companyid:this.detaildata.companyid,
				is_m:this.detaildata.type
				
			}
					let desccontent=this.detaildata.departname;
			let username=uni.getStorageSync('username');
			var title="邀请加入"+desccontent;
	
			if(this.detaildata.type=='is_m'){
				desccontent = "管理员"+username+"邀请您成为"+desccontent+"经理,请点击查看"
			}else{	
				desccontent = desccontent+"经理"+username+",邀请您成为接待人,请点击查看"
			}
			var url=this.weixinhttpurl+'/#/pages/Departmentmanagement/sharedepartment?detailDate=' + encodeURIComponent(JSON.stringify(detail))+'&sharecode='+this.userinfoin.sharecode;
			var img=this.sharehttpurl+'/static/images/addyaoqing.jpg?123';
			var sharedata={
				title:title,
				desc:desccontent,
				img:img,
				link:url
			}
			// #ifdef H5 
			wexinshare(sharedata)//微信分享
			// #endif
		},
		
		showshare(){
			this.invite();
			this.sharein=true;
			this.showsharewin=false;
		},
		hideshare(){
			this.sharein=false;
		},
		creatQrcode() {
			this.$refs.qrcode._makeCode()
		},
		cancelEvent2(){
			this.visible = false
			this.authorization=false
		},
		cancelEvent(){
			uni.hideToast();
			this.showsharewin=false;
			
		},
		userdeptmanager(id,deptid,item){
			if(item.roleid==5||item.roleid==3){
				var showtext='确定要撤销经理';
				var set='de';
			}else{
				var showtext='确定要设置经理';
				var set='ce';
			}
			let that=this;
			uni.showModal({
			    title: showtext,
			    success: function (res) {
			        if (res.confirm) {
						deptmanager({uid:id,deptid:deptid,set:set}).then(res=>{
							console.log(res)
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon:'none'
							});
							this.page=1;
							that.showlist=[];
							that.apply_datalist=[];
							that.getlistrequest()
							
						})
					}else if (res.cancel) {
					  console.log('用户点击取消');
					}
				  }
				})
		},
		delPersonnel(){ //删除接口
			console.log(this.detaildata)
			if(this.detaildata.is_security==1){
				uni.showToast({
				    title: '默认部门无法删除',
				    duration: 2000,
					icon:'none'
				});
				return;}
				if(this.getis_del==1){
					uni.showToast({
					    title: '部门有员工无法删除',
					    duration: 2000,
						icon:'none'
					});
					return;}
				
			let _that = this
			console.log(this.detaildata.id)
			uni.showModal({
			    title: '确认删除此部门?',
			    // content: '这是一个模态弹窗',
			    success: function (res) {
			        if (res.confirm) {
						deletedept({id:_that.detaildata.id}).then(res=>{
							uni.showToast({
								icon: 'none',
								title: res.data.message,
								duration: 2000
							});
							
							setTimeout(()=>{
									uni.reLaunch({
									    url: '/pages/Departmentmanagement/departmentManagement'
									});
							},1000)
						})
			            // console.log('用户点击确定');
			        } else if (res.cancel) {
						/*bann*/
						return 
			            // console.log('用户点击取消');
			        }
			    }
			});
		},
		
		aduit(id,type){
			let that=this;
			uni.showModal({
			    title: '确定要审核?',
			    success: function (res) {
			        if (res.confirm) {
						applystate({id:id,status:type}).then(res=>{
							console.log(res)
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon:'none'
							});
							this.page=1;
							that.showlist=[];
							that.apply_datalist=[];
							that.getlistrequest()
							
						})
					}else if (res.cancel) {
					  console.log('用户点击取消');
					}
				  }
				})
		},
		ModifyPersonnel(){ //跳转修改页面
		if(this.detaildata.is_security==1){
			uni.showToast({
			    title: '默认部门无法修改',
			    duration: 2000,
				icon:'none'
			});
			return;}
			
			console.log(1)
			// uni.reLaunch({
			// 	url: './departmentPersonnel'
			// });
			uni.navigateTo({
				url: './addDepartment?detaildata=' + encodeURIComponent(JSON.stringify(this.detaildata))
			});
			
		},
		onNavigationBarButtonTap() {
			console.log("您点击了按钮")
		},
		onNavigationBarSearchInputChanged (e) {
			// console.log("您输入了信息")
			this.page=1;
			this.showlist=[];
			this.keyword=e.text;
			this.requestchanger = true
			this.getlistrequest();
		},
		addpersonnel(id){//添加受访人
			addsurveyed({uid:id,deptid:this.detaildata.id,}).then(res=>{
				console.log(res)
				if(res.data.code == 200){
					uni.showToast({
					    title: res.data.message,
					    duration: 2000,
						icon:'none'
					});
					// this.page=1;
					this.showlist=[];
					this.apply_datalist=[];
					this.getlistrequest()
				}else{
					uni.showToast({
					    title:  res.data.message,
					    duration: 2000,
						icon:'none'
					});
				}
				
			})		
		},
		deluserdep(id){
			let _that = this
			uni.showModal({
			    title: '确认退出部门?',
			    // content: '这是一个模态弹窗',
			    success: function (res) {
			        if (res.confirm) {
						deptudeluser({uid:id,type:'d'}).then(res=>{
							uni.showToast({
								icon: 'none',
								title: res.data.message,
								duration: 2000
							});
							_that.showlist=[];
							_that.apply_datalist=[];
							_that.getlistrequest()
							
						})
			            // console.log('用户点击确定');
			        } else if (res.cancel) {
						/*bann*/
						return 
			            // console.log('用户点击取消');
			        }
			    }
			});
		},
		
		deluser(id){
			let _that = this
			uni.showModal({
			    title: '确认退出公司?',
			    // content: '这是一个模态弹窗',
			    success: function (res) {
			        if (res.confirm) {
						deptudeluser({uid:id,type:'c'}).then(res=>{
							uni.showToast({
								icon: 'none',
								title: res.data.message,
								duration: 2000
							});
							_that.showlist=[];
							_that.apply_datalist=[];
							_that.getlistrequest()
							
						})
			            // console.log('用户点击确定');
			        } else if (res.cancel) {
						/*bann*/
						return 
			            // console.log('用户点击取消');
			        }
			    }
			});
		},
		cancelpersonnel(id){//取消受访人
			cancelsurveyed({uid:id,deptid:this.detaildata.id,}).then(res=>{
				console.log(res)
				
			})		
		},
		backRefresh(type){ //返回刷新带参数
			console.log(type)
			this.page=1;
			this.getlistrequest();
		},
		
		/*下拉刷新的回调*/
			downCallback(){
				this.getlistrequest()
			},
		/*上拉加载的回调*/
			upCallback(page) {			
			
				this.getlistrequest()
				this.mescroll.endSuccess(this.showlist.length, this.requestchanger);
			},
			getlistrequest(){
				this.page++
				userman({
					req_depid:this.id,
					companyid: this.detaildata.companyid,
					offset:this.showlist.length,
					length:this.pagesize,
					keyword:this.keyword,
					
				}).then(res=>{
					this.apply_datalist=res.data.apply_data;
					this.getis_del=res.data.is_del
				for (let i = 0; i < res.data.userdata.length; i++) {
					this.showlist.push(res.data.userdata[i])
				}
				
				if(this.showlist.length >= this.count){
					this.requestchanger = false
				}else{
					this.requestchanger = true
				}
				this.mescroll.endSuccess(res.data.count,this.requestchanger)
				})
			},	
		onNavigationBarButtonTap: function(e) {
			console.log(JSON.stringify(e));
			let detail = {
				id: this.detaildata.id,
				companyid: this.detaildata.companyid,
				departname:this.detaildata.departname,
			};
			
			uni.navigateTo({
				url: './addPersonnel?detaildata=' + encodeURIComponent(JSON.stringify(detail))
			});
		},
		addprouns(type){
			// let detail = {
			// 	id: this.detaildata.id,
			// 	companyid: this.detaildata.companyid,
			// 	departname:this.detaildata.departname,
			// 	type:type
			// };
			this.showsharewin=true;
			this.detaildata.type=type;
			// uni.navigateTo({
			// 	url: './addPersonnel?detaildata=' + encodeURIComponent(JSON.stringify(detail))
			// });
		},
		
	},
	onLoad(event) {
		this.page = 0
		this.showlist = []
		// return
		try {
			this.detaildata = JSON.parse(decodeURIComponent(event.detaildata));
			console.log(this.detaildata);
		} catch (error) {
			this.detaildata = JSON.parse(event.detaildata);
			console.log(this.detaildata);
		}
		this.id = this.detaildata.id;
		// userindexlist({deptid:this.id}).then(res=>{
		// 	console.log(res)
		// })
		uni.setNavigationBarTitle({
		    title: this.detaildata.departname
		})
		userinfo({}).then(res=>{//获取用户信息
			console.log(res)
			this.userinfoin = res.data.data;
			
		})
		userman({
			req_depid:this.id,
			companyid: this.detaildata.companyid,
			offset:this.page,
			length:this.pagesize
		}).then(res=>{
			console.log(res)
			this.getis_del=res.data.is_del
			this.showlist = res.data.userdata			
			this.apply_datalist=res.data.apply_data;
		});
		
		
		
		
		if(this.detaildata.departname=='保安部'||this.detaildata.departname=='保安'){
			this.showbtnstup=false;
		}
	},
			
};
</script>
<style lang="scss">
	.sharewindow{position:fixed;z-index: 999;top: 0px;right: 0;height: 100%;background-color: rgba(0,0,0,0.4);}
	.colleagues-tip {
		width: 55px;
		height: 55px;
		left: 5px;
		top: 313px;
		color: rgba(80, 80, 80, 1);
		// background-color: rgba(153, 153, 153, 1);
		border-radius: 28px;
		margin-left: 10px;
		.headimg{
			width:60px;
			height: 60px;
			border-radius: 60%;
		}
	}
	.colleagues-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 77%;
		margin-left: 20px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
		.name {
			color: rgba(80, 80, 80, 1);
			font-size: 14px;
			left: 60%;
			// position: relative;
			top: -26px;
		}
		.phone-number {
			
			color: rgba(80, 80, 80, 1);
			font-size: 16px;
			font-weight: bold;
		
		}
		.colleagues-company {
			// position:relative;
			top: -20px;
			color: #9c9c9c;
			font-size: 14px;
			line-height: 1.4;
			
		}
		.colleagues-add {
			justify-content: flex-end;
			align-items: flex-end;
			.colleagues-add-bnt {
				width: 160rpx;
				height: 27px;
				color: rgba(255, 255, 255, 1);
				background-color: rgba(42, 130, 228, 1);
				border-radius: 18px;
				font-size: 14px;
				line-height: 27px;
				text-align: center;
				// margin-left: auto;
			}
			.colleagues-add-bntred {
				width: 160rpx;
				height: 27px;
				color: rgba(255, 255, 255, 1);
				background-color: red;
				border-radius: 18px;
				font-size: 14px;
				line-height: 27px;
				text-align: center;
				// margin-left: auto;
			}
		}
	
	}
.colleagues {
		width: 95%;
		margin: 0 auto;
		border-radius: 8px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		padding: 18px 0;}
.btnapprow{position: fixed;bottom: 100upx;left: 0px;width: 100%;z-index: 999;text-align: center;}
.btnapprow .btn-row{background: #fff;    width: 80%;margin: 0 auto;padding-bottom: 10px;padding-top: 10px;}
.btnapprow2{position: fixed;bottom: 100upx;left: 0px;width: 100%;z-index: 999;text-align: center;}
.btnapprow2 .btn-row{background: #fff;    width: 27%;margin: 0 auto;padding-bottom: 10px;padding-top: 10px;display: inline-block;}
.primary{
	background: #007aff;
	font-size: 16px;
}
.primarydel{
	background: #ff0000;
	font-size: 16px;
}
.train23 .btn-plusempty{top: 160upx;}
.control{
		background:#5f5f5f;
	}
	
	
	.scan-box{
		display:block;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.3);
		z-index:999;
	}
	.scan-item{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		position:relative;
		margin:0 auto;
		width:80%;
		height:100%;
		-webkit-box-pack:center;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;
		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		opacity:1;
	
	}
	.scan-content3{
		position:relative;
		width: 460upx;
		height: 240upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.scan-content{
		position:relative;
		width: 460upx;
		height: 550upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.scan-icon{
		position: absolute;
		top: -50upx;
		left: 180upx;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		box-sizing:border-box;
		background: #FFFFFF;
		padding: 20upx;
	}
	.scan-icon-img{
		width: 100%;
		height: 100%;
	}
	.scan-text{
		position: absolute;
		bottom: 40upx;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.scan-share{
		width: 100%;
		height: 100%;
	}
	.scan-img{
		width: 300upx;
		height: 300upx;
		margin: auto;
		display: block;
		position: absolute;
		top: 60upx;
		left: 50upx;
		z-index: 99;
	}
	.scan-btn{
		top:-30upx;
		left:auto;
		right:-30upx;
		bottom:auto;
		position:absolute;
		width:64upx;
		height:64upx;
		border-radius:50%;
		z-index:99999;
		display: flex;
	}
</style>
